<template>
  <div>
    <!-- 底部导航 -->
    <div class="nav-menu-app" style="background-color: rgb(46, 35, 52);">
      <ul class="nav-group clearfix">
        <li class="nav-group-item ">
          <a href="tel:17603031141" style="background-position: center 2px">
            <x-icon type="ios-telephone" :style="{fill:'rgb(255, 128, 128)'}" size="100%" ></x-icon>
            <span js-onclass-color="" class="" style="color: rgb(255, 128, 128);">给我电话</span>
          </a>
        </li>
        <li class="nav-group-item ">
          <a href="sms:17603031141" style="background-position: center 2px">
            <x-icon type="ios-chatbubble" :style="{fill:'rgb(255, 128, 128)'}" size="100%"></x-icon>
            <span js-onclass-color="" class="" style="color: rgb(255, 128, 128);">给我信息</span>
          </a>
        </li>
        
        <li class="nav-group-item " @click.prevent="childgetContent(lists.QQ)">
          <a :href="bulidqq" style="background-position: center 2px">
            <x-icon type="ios-heart" :style="{fill:'rgb(255, 128, 128)'}" size="100%"></x-icon>
            <span js-onclass-color="" class="" style="color: rgb(255, 128, 128);">QQ交谈</span>
          </a>
        </li>
        <li class="nav-group-item " @click.prevent="addwechatErcode">
          <a href="#" style="background-position: center 2px">
            <x-icon type="chatbubble-working" :style="{fill:'rgb(255, 128, 128)'}" size="100%"></x-icon>
            <span js-onclass-color="" class="" style="color: rgb(255, 128, 128);">加我微信</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="fleft">
        <a class="chat" href="javascript:void(0);">
            <p>
                <span>
                  <img src="http://wx.jlmgps.com/attachment/images/4/2016/11/PHd4E8i4IGg4GU8l8G2N4DmqNIShIa.jpg" alt="头像">
                </span>
            </p>
            <span style="font-size: 14px;">
                王妮        
            </span>
        </a>
    </div>
  </div>
</template>
<script type="application/ecmascript">
import _ from 'lodash'
import { mapState} from 'vuex'
import {Tab,TabItem,XDialog,Qrcode} from 'vux'
export default {
    components: {
      Tab,
      TabItem,
      XDialog,
      Qrcode
    },
    props:['lists'],
    data () {
      return {
        show2: false,
        cardercode:true,
      }
    },
    name: 'HeaderBgImg',
    computed: {
      ...mapState({
        //bgImg:state => state.moduleEdit.bgImg,
      }),
      bulidqq(){
        return 'http://wpa.qq.com/msgrd?v=3&amp;uin='+this.lists.QQ+'&amp;site=qq&amp;menu=yes'
      },
    },
    methods:{
      childgetContent(val){
        //console.log(val)
        this.$emit('childgetContent',val)
      },
      addwechatErcode(){
        this.$emit('getWetchErcode')
      }
    }
}

</script>
<style lang="less" scoped>
.nav-menu-app {
    display:flex;
    padding-left:20%;
    box-shadow:0 -3px 5px rgba(0,0,0,.8);
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    color: #333;
    text-align: center;
    z-index: 10;
    .nav-group {
        width: 80%;
        height: 100%;
        .nav-group-item {
          width: 25%;
          float: left;
          display: block;
          height: 100%;
          position: relative;
          a{
            display: block;
            height: 30px;
            width: 100%;
            text-align: center;
            background-size: contain;
            background-position: center center;
            background-repeat: no-repeat;
            color: #fff;
            span {
                display: block;
                height: 20px;
                width: 100%;
                line-height: 10px;
                overflow: hidden;
                font-size: 12px;
                color: #fff;
            }
          }
        }
    }
    .clearfix{
      clear:both;
    }
}
.fleft{ 
  width:50px; 
  position:fixed; 
  bottom:0px; 
  left:10px; 
  color:#fff; 
  display:block; 
  overflow:hidden;
  z-index: 11;
  a{ 
    color:#fff; 
    display:block;
    span{ 
      height:20px; 
      line-height:20px; 
      font-size:12px; 
      text-align:center; 
      padding-top:2px; 
      display:block; 
      overflow:hidden;}

  }
  p{ 
    width:46px; 
    height:46px; 
    border:2px solid #fff; 
    border-radius:50%; 
    margin-right:5px; 
    overflow:hidden;
    span{ 
      width:48px; 
      height:48px; 
      border-radius:50%; 
      display:block; 
      overflow:hidden;
      margin-left: -1px;
      margin-top: -2px;
      img{ 
        width:48px;
      }
    }
  }

} 
</style>